<template>
  <div class="about-page">
    <div class="container">
      <div class="about-content">
        <h1 class="page-title">关于柯基工具箱</h1>
        
        <div class="about-section card">
          <h2>柯基工具箱简介</h2>
          <p>柯基工具箱是一个集成各种实用办公工具的一站式在线平台，旨在帮助用户提高工作效率。提供文档处理、效率提升、数据处理和创意设计等多种工具，满足您在日常办公中的各种需求。</p>
          <p>所有工具均支持纯离线运行，保护您的数据安全，文件不会上传到服务器，处理全部在浏览器本地完成。</p>
        </div>
        
        <div class="features-section card">
          <h2>核心功能</h2>
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :md="6" v-for="(feature, index) in features" :key="index">
              <div class="feature-item">
                <el-icon :size="40" class="feature-icon"><component :is="feature.icon"></component></el-icon>
                <h3>{{ feature.title }}</h3>
                <p>{{ feature.description }}</p>
              </div>
            </el-col>
          </el-row>
        </div>
        
        <div class="versions-section card">
          <h2>版本对比</h2>
          <el-table :data="versionData" style="width: 100%" :stripe="true">
            <el-table-column prop="feature" label="功能"></el-table-column>
            <el-table-column prop="free" label="免费版"></el-table-column>
            <el-table-column prop="pro" label="个人Pro"></el-table-column>
            <el-table-column prop="team" label="团队Pro"></el-table-column>
          </el-table>
        </div>
        
        <div class="contact-section card">
          <h2>联系我</h2>
          <p>如有任何问题或建议，请关注公众号"程序员柯基"，在后台留言与我联系。</p>
          <p>我会不断完善工具功能，您的反馈对我非常重要！</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Document, Timer, Grid, PictureFilled } from '@element-plus/icons-vue';

// 核心功能特点
const features = [
  {
    icon: 'Document',
    title: '文档处理',
    description: '格式转换、文本处理、文件压缩等功能'
  },
  {
    icon: 'Timer',
    title: '效率工具',
    description: '时间管理、任务清单、快捷工具等'
  },
  {
    icon: 'Grid',
    title: '数据工具',
    description: '表格处理、数据格式化、数据可视化'
  },
  {
    icon: 'PictureFilled',
    title: '创意设计',
    description: '图片处理、配色方案、海报模板等'
  }
];

// 版本比较数据
const versionData = [
  {
    feature: '基础功能',
    free: '✓',
    pro: '✓',
    team: '✓'
  },
  {
    feature: '广告',
    free: '有',
    pro: '无',
    team: '无'
  },
  {
    feature: '高级功能',
    free: '×',
    pro: '✓',
    team: '✓'
  },
  {
    feature: '云存储空间',
    free: '无',
    pro: '10GB',
    team: '50GB'
  },
  {
    feature: '协作功能',
    free: '×',
    pro: '×',
    team: '✓'
  },
  {
    feature: 'API访问',
    free: '×',
    pro: '×',
    team: '✓'
  },
  {
    feature: '价格',
    free: '$0',
    pro: '$5/月',
    team: '$20/月(5人)'
  }
];
</script>

<style scoped>
.about-page {
  padding: 20px 0 60px;
}

.page-title {
  text-align: center;
  margin-bottom: 30px;
  color: var(--primary-dark);
}

.about-content > div {
  margin-bottom: 40px;
}

.about-section h2,
.features-section h2,
.versions-section h2,
.contact-section h2 {
  color: var(--primary-dark);
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 10px;
}

.about-section h2::after,
.features-section h2::after,
.versions-section h2::after,
.contact-section h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background-color: var(--primary-light);
}

.about-section p,
.contact-section p {
  margin-bottom: 15px;
  line-height: 1.6;
}

.feature-item {
  text-align: center;
  padding: 20px;
  height: 100%;
  transition: transform var(--transition-normal);
}

.feature-item:hover {
  transform: translateY(-5px);
}

.feature-icon {
  color: var(--primary-color);
  margin-bottom: 15px;
}

.feature-item h3 {
  font-size: 18px;
  margin-bottom: 10px;
  color: var(--primary-dark);
}

.feature-item p {
  color: var(--dark-gray);
  font-size: 14px;
}

.versions-section .el-table {
  margin-top: 20px;
}
</style> 